<template>
  <div class="side">
    <h2 class="cl-music">云音乐特色榜</h2>
    <ul class="cloud">
      <li
        v-for="cloud in cloudList"
        :key="cloud.id"
        @click="toDetail(cloud.id)"
        :class="{ active: cloudId == cloud.id }"
      >
        <div class="left">
          <img :src="cloud.coverImgUrl" alt="" width="40" height="40" />
        </div>
        <div class="cloud-name">{{ cloud.name }}</div>
        <div class="cloud-date">{{ cloud.updateFrequency }}</div>
      </li>
    </ul>
    <h2 class="cl-music">全球媒体榜</h2>
    <ul class="cloud">
      <li
        v-for="earth in earthList"
        :key="earth.id"
        @click="toDetail(earth.id)"
      >
        <div class="left">
          <img :src="earth.coverImgUrl" alt="" width="40" height="40" />
        </div>
        <div class="cloud-name">{{ earth.name }}</div>
        <div class="cloud-date">{{ earth.updateFrequency }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'rank-side',
  data() {
    return {
      cloudId: 0,
    }
  },
  computed: {
    ...mapGetters('ranklist', ['cloudList', 'earthList']),
  },
  methods: {
    ...mapActions('ranklist', ['getRankDetail']),
    async toDetail(id) {
      this.cloudId = id

      await this.getRankDetail(id)
    },
  },
  watch: {
    cloudList: {
      async handler(newVal) {
        let id = newVal[0].id
        await this.getRankDetail(id)
      },
    },
  },
}
</script>

<style lang="less" scoped>
.side {
  width: 240px;
  overflow: hidden;
  border: 1px solid #ccc;
  border-style: none solid none solid;
  float: left;
  padding-top: 40px;
  background-color: #f9f9f9;
  .cl-music {
    padding: 0 10px 12px 15px;
    text-align: left;
    font-weight: bold;
  }
  .cloud {
    cursor: pointer;
    text-align: left;
    .active {
      background-color: #c2c2c2;
    }
    .left {
      margin-right: 10px;
      width: 40px;
      height: 40px;
      float: left;
    }
    li {
      padding: 10px 0 10px 20px;
      .cloud-name {
        margin: 2px 0 8px;
      }
    }
  }
}
</style>
